<template>
  <div class="box">
    <div class="goHome" @click="goHome">返回主页</div>
    <div class="banner">
      <h1>信用报告查询</h1>
      <div class="scan">
        <el-input
          v-model="entname"
          placeholder="请输入企业名称/统一社会信用代码"
          clearable
          style="width: 800px"
        />
        <h4 @click="scan">查询</h4>
      </div>
    </div>
    <div class="f2">
      <div class="f2_content">
        <template v-if="status">
          <div class="title">应用场景</div>
          <div class="useScene">
            <div class="useSceneLeft">
              <img src="@/assets/report/组104.png" alt="" />
            </div>
            <div class="useSceneRight">
              <div class="useSceneRightList">
                <h4>金融风控</h4>
                <p>
                  通过商务信用报告，金融机构可以更准确地评估企业的信用风险，进行准入审批、额度管理、利率管理、客户分类，制定更有效的风险管理策略。
                </p>
              </div>
              <div class="useSceneRightList" style="background: #f0faf4">
                <h4>贸易风控</h4>
                <p>
                  筛选贸易伙伴时，企业通过商务信用报告，可以更准确地评估贸易伙伴的信用状况并做出贸易决策。在贸易过程中，企业可以定期查看贸易伙伴的商务信用报告，了解其信用状况的变化。并及时采取风险管理措施。
                </p>
              </div>
              <div class="useSceneRightList" style="background: #fdf9f3">
                <h4>招商风控</h4>
                <p>
                  政府可以通过商务信用报告了解企业经营状况、财务状况和信誉度等信息，根据信用状况，调整审批流程优惠政策等，提高招商效率。
                </p>
              </div>
            </div>
          </div>
          <div class="title">报告内容</div>
          <div class="list">
            <div class="list_data img"></div>
            <div class="list_data img1"></div>
            <div class="list_data img2"></div>
            <div class="list_data img3"></div></div
        ></template>
        <!-- 查询结果 -->
        <template v-else>
          <div class="result" v-for="item in list" :key="item.credit_no">
            <div class="result_left">
              <div class="result_left_top">
                <h1>{{ item.name }}</h1>
                <h6>续存</h6>
              </div>
              <div class="result_left_bottom">
                <h4>统一社会信用代码：{{ item.credit_no }}</h4>
                <h4>法定代表人：{{ item.oper_name }}</h4>
                <h4>成立日期：{{ item.start_date }}</h4>
              </div>
            </div>
            <div class="result_right">
              <div class="btn" @click="getReport(item)">获取报告</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch } from "@/api/report";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      status: true,
      entname: "", //广东测试化有限公司
      list: null,
    };
  },
  mounted() {
    document.documentElement.scrollTop = 0;
  },
  methods: {
    goHome() {
      this.$router.push("/");
    },
    async scan() {
      if (this.entname == "") return;
      let url = "/credit/mohu";
      let params = {
        keyword: this.entname,
      };
      let data = await myPostFetch(url, params);
      if (data.code == 31001)
        return ElMessage.error("请输入正确的企业名称/统一社会信用代码");
      if (data.code == 200) {
        this.list = data.data.items;
        this.status = false;
      }
    },
    // 跳转获取报告页面
    getReport(item) {
      sessionStorage.setItem("credit_no", item.credit_no);
      sessionStorage.setItem("matchItems", item.name);
      this.$router.push("/getReport");
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  // background-color: #f5f7fa;
  background: #fff;
  .goHome {
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    right: 80px;
    top: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: underline;
  }
  .banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 330px;
    background: url(@/assets/report/组47.png);
    background-size: 100% 100%;
    h1 {
      font-size: 40px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #ffffff;
      font-weight: 600;
    }
    .scan {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 52px;
      margin-top: 56px;
      h4 {
        cursor: pointer;
        align-items: center;
        justify-content: center;
        display: flex;
        width: 100px;
        height: 52px;
        background: #ff752c;
        border-radius: 0px 4px 4px 0px;
        color: #fff;
        font-size: 18px;
        font-weight: 400;
      }
    }
  }
  .f2 {
    width: 100%;
    .f2_content {
      box-sizing: border-box;
      padding-bottom: 80px;
      width: 1200px;
      margin: 0 auto;
      .title {
        font-size: 30px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #181818;
        margin-top: 75px;
        margin-bottom: 45px;
      }
      // 应用场景
      .useScene {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        height: 400px;
        .useSceneLeft {
          width: 341px;
          height: 400px;
          img {
            height: 100%;
          }
        }
        .useSceneRight {
          width: 815px;
          height: 100%;
          .useSceneRightList {
            box-sizing: border-box;
            padding: 20px 28px;
            width: 814px;
            height: 120px;
            background: #eef6fe;
            margin-bottom: 20px;
            h4 {
              font-weight: 500;
              font-size: 20px;
              color: #181818;
              margin-bottom: 3px;
            }
            p {
              font-weight: 300;
              font-size: 16px;
              color: #181818;
              line-height: 24px;
            }
          }
        }
      }
      .list {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 376px;
        .list_data {
          width: 280px;
          height: 376px;

          border-radius: 8px;
        }
        .img {
          background-image: url(@/assets/report/01.png);
          background-size: 100% 100%;
          // box-shadow: 0px 0.0313px 0.1042px 0px rgba(179, 197, 223, 0.26);
        }
        .img1 {
          background-image: url(@/assets/report/02.png);
          background-size: 100% 100%;
        }
        .img2 {
          background-image: url(@/assets/report/03.png);
          background-size: 100% 100%;
        }
        .img3 {
          background-image: url(@/assets/report/04.png);
          background-size: 100% 100%;
        }
      }
      // 查询结果
      .result {
        display: flex;
        box-sizing: border-box;
        padding: 37px 80px 35px 54px;
        margin-top: 50px;
        width: 1200px;
        height: 145px;
        background: #ffffff;
        box-shadow: 0px 6px 20px 0px rgba(179, 197, 223, 0.26);
      }
      .result_left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 100%;
        .result_left_top {
          display: flex;
          align-items: center;
          h1 {
            font-size: 22px;
            font-family: Source Han Sans SC;
            font-weight: bold;
            color: #000000;
          }
          h6 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 19px;
            background: #f06900;
            border-radius: 2px;
            font-size: 14px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #ffffff;
            margin-left: 22px;
          }
        }
        .result_left_bottom {
          display: flex;
          align-items: center;
          h4 {
            font-size: 16px;
            font-family: Source Han Sans SC;
            font-weight: 400;
            color: #7a7a7a;
            margin-right: 60px;
          }
        }
      }
      .result_right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160px;
        height: 100%;
        .btn {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 160px;
          height: 32px;
          background: #0a7be0;
          border-radius: 4px;
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ffffff;
        }
      }
    }
  }
}
::v-deep .el-input__inner {
  height: 52px;
  border-radius: 4px 0 0 4px;
}
</style>
